<template>
  <div class="goodslist">
    <el-steps :active="activeName-0" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    <!-- 标签页 -->
    <template>
      <el-tabs v-model="activeName" tabPosition="left" style="margin-top: 25px">
        <el-tab-pane label="基本信息" name="1">
          <el-form :model="addform" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="addform.goods_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="addform.goods_price" type="number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重量">
              <el-input v-model="addform.goods_weight" type="number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input v-model="addform.goods_number" type="number"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-cascader
              v-model="value"
              :options="roleList"
              :props="props"
              clearable></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="2">
          <el-upload
            class="upload-demo"
            action="http://localhost:8888/api/private/v1/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="successPic"
            :file-list="fileList"
            :before-upload="befUpload"
            :headers='getHeader()'
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="3">
          <quill-editor
            ref="myQuillEditor"
            style="height: 400px"
            v-model="content"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
          />
        </el-tab-pane>
      </el-tabs>
    </template>
    <el-button type="success" style="margin-top: 15px; float: right" @click='addSumbit'>提交</el-button>
    <!-- 图片放大框 -->
    <el-dialog title="图片" :visible.sync="picdialogTableVisible">
      <img :src="imgUrl" style="display:block;margin: 0 auto;" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {getCategories, addGoodsList} from '@/api/index.js'
export default {
  data () {
    return {
      activeName: '1',
      addform: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: []
      },
      roleList: [],
      value: '',
      props: {
        checkStrictly: true,
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      fileList: [],
      imgUrl: '',
      picdialogTableVisible: false,
      content: '',
      editorOption: {}
    }
  },
  mounted () {
    getCategories({'type': 3}).then(res => {
      this.roleList = res.data
    })
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    // 上传请求头
    getHeader () {
      var token = sessionStorage.getItem('mytoken')
      return {Authorization: token}
    },
    // 图片上传成功时的勾子
    successPic (response) {
      this.addform.pics.push({'pic': response.data.tmp_path})
    },
    // 图片上传前检查图片大小
    befUpload (file) {
      if (file.size > 500 * 1024) {
        this.$message.warning('请上传500k以下的文件')
        return false
      }
    },
    // 上面那个上传图片前的钩子函数就算return false 也会触发下面这个函数，所以加个判断
    handleRemove (file) {
      if (file.response === undefined || file.response === false) {
        return false
      } else {
        // 使用findIndex()删除数组中已被删除的图片索引
        var piclink = file.response.data.tmp_path
        var index = this.addform.pics.findIndex(res => {
          return res.pic === piclink
        })
        console.log(index)
        this.addform.pics.splice(index, 1)
      }
    },
    handlePreview (file) {
      this.picdialogTableVisible = true
      this.imgUrl = 'http://localhost:8888/' + file.response.data.tmp_path
    },
    addSumbit () {
      if (this.value === '') {
        this.$message.error('请选择商品分类')
      } else {
        var catmsg = this.value.join(',')
        this.addform.goods_cat = catmsg
      }
      this.addform.goods_introduce = this.content
      console.log(this.addform)
      addGoodsList(this.addform).then(res => {
        console.log(res)
        if (res.meta.status === 201) {
          // 成功提醒
          this.$message.success(res.meta.msg)
          // 跳转页面
          this.$router.push({'path': 'list'})
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
